<template>
  <div class="cont">
    <div class="div">
      <!-- 新增 -->

      <el-button icon="el-icon-s-promotion" @click="addS">添加</el-button>
      <!-- 内容 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>

        <!-- ----------------------------------------- -->
        <el-table-column prop="cid" label="分类ID">
        </el-table-column>
        <el-table-column prop="name" label="分类名称">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="update(scope.row.cid)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="deletes(scope.row.cid)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="" label="分类状态">
          <template slot-scope="scope">
            {{ scope.row.status | byNoOk }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改分类 -->
      <el-drawer
        title="分类数据"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item
              label="分类名称"
              :label-width="formLabelWidth"
              style="width: 400px; margin-left: 10px"
            >
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="分类状态"
              :label-width="formLabelWidth"
              style="width: 400px; margin-left: 10px"
            >
              <el-input
                v-model="form.status"
                autocomplete="off"
                placeholder=" 1 为显示 0 为不显示"
              ></el-input>
            </el-form-item>
          </el-form>
          <div
            class="demo-drawer__footer"
            style="margin-top: 50px; margin-left: 20px ;"
          >
            <el-button @click="cancelForm">取 消</el-button>
            <el-button
              type="primary"
              @click="$refs.drawer.closeDrawer()"
              :loading="loading"
              >{{ loading ? "提交中 ..." : "确 定" }}</el-button
            >
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paperCont: "",
      drawer: false,
      //分页
      Pagination: {
        page: 1,
        pageSize: 10,
        total: 2,
      },
      users: {
        name: "",
        password: "",
      },

      tableData: [],
      // 修改数据
      form: {
        name: "",
        status: "",
      },
      formLabelWidth: "80px",
      timer: null,
      table: false,
      dialog: false,
      loading: false,
      cid: "",
      doSomeThat: 1,
    };
  },
  mounted() {
    this.currentchange();
  },
  filters: {
    byNoOk(vule) {
      if (vule == 1) return "√ 已通过";
      else if (vule == 0) return "× 未通过";
    },
  },
  methods: {
    addS() {
      this.dialog = true;
      this.doSomeThat = 1;
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);

          // 赋值修改数据
          let name = this.form.name;
          let status = this.form.status;
          let cid = this.cid;
          let doSomeThat = this.doSomeThat;
          if (doSomeThat == 0) {
            this.$http
              .post("/category/update", {
                cid,
                name,
                status,
              })
              .then((res) => {
                this.currentchange();
              });
          } else if (doSomeThat == 1) {
            this.$http
              .post("/category/add", {
                name,
              })
              .then((res) => {
                this.currentchange();
              });
          }
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },

    update(id) {
      this.doSomeThat = 0;
      this.cid = id;
      this.dialog = true;
    },
    deletes(cid) {
      this.$http
        .post("/category/del", {
          cid,
        })
        .then((res) => {
          this.currentchange();
        });
    },
    drawers(z) {
      this.paperCont = z;
      this.drawer = true;
    },

    // inquire(){

    //   this.currentchange ()
    // },
    currentchange() {
      this.$http
        .get("/category/", {
          ...this.Pagination,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    login() {
      this.$http
        .post("/login/", {
          ...this.users,
        })
        .then((res) => {
          localStorage.setItem("token_z", res.info.token);
        });
    },
  },
};
</script>

<style scoped>
.cont {

    animation: fadeInLeft;
  animation-duration: 0.9s;
}
.div {

padding: 15px;
padding-right: 80px;
}
.from {
  width: 100px;
}
</style>